<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="20" class="p-b-6">
          <el-col :span="8">
            <div class="p-6 rounded-lg box-shadow">
              <div class="flex justify-between">
                <div>
                  <p class="text-slate-400 my-0">订单情况</p>
                  <p class="text-4xl my-4">{{ topData.orderPrice }}</p>
                </div>
                <div>
                  <img :src="getIcon('institution')" />
                </div>
              </div>
              <div class="flex justify-between">
                <p class="text-slate-400 my-0">
                  销售订单<span
                    class="i-octicon-triangle-up-24 text-amber-500"
                  ></span
                  >{{ topData.orderNum }}
                </p>
                <!-- <p class="text-slate-400 my-0">
                  采购订单<span
                    class="i-octicon-triangle-down-24 text-green-500"
                  ></span
                  >122
                </p> -->
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="p-6 rounded-lg box-shadow">
              <div class="flex justify-between">
                <div>
                  <p class="text-slate-400 my-0">回款情况(元)</p>
                  <p class="text-4xl my-4">{{ topData.repaymentPrice }}</p>
                </div>
                <div>
                  <img :src="getIcon('customer')" />
                </div>
              </div>
              <div class="flex justify-between">
                <p class="text-slate-400 my-0">
                  已开票<span
                    class="i-octicon-triangle-up-24 text-amber-500"
                  ></span
                  >{{ topData.invoiced }}
                </p>
                <p class="text-slate-400 my-0">
                  未开票<span
                    class="i-octicon-triangle-down-24 text-green-500"
                  ></span
                  >{{ topData.unInvoiced }}
                </p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="p-6 rounded-lg box-shadow">
              <div class="flex justify-between">
                <div>
                  <p class="text-slate-400 my-0">供应商情况</p>
                  <p class="text-4xl my-4">{{ topData.supplierNum }}</p>
                </div>
                <div>
                  <img :src="getIcon('digital')" />
                </div>
              </div>
              <div
                class="flex justify-between"
                v-if="topData.customerStars.length > 0"
              >
                <p
                  class="text-slate-400 my-0 flex items-center"
                  v-for="i in 3"
                  :key="i"
                >
                  <dict-drop
                    :options="customer_star"
                    :value="topData.customerStars[i - 1].customerStar"
                  /><span :class="[`text-${Color[i - 1]}-500`]">●</span
                  >{{ topData.customerStars[i - 1].num }}
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="p-b-6">
          <el-col :span="24">
            <el-card class="box-card order-card">
              <template #header>
                <div class="card-header flex justify-between items-center">
                  <div class="font-bold text-xl">
                    订单统计<span
                      v-if="orderIndustryData.totalPrice"
                      class="m-l-6 text-slate-400 text-sm"
                      >订单合计:<span class="text-blue-600">{{
                        (orderIndustryData.totalPrice / 10000).toFixed(6)
                      }}</span
                      >万</span
                    >
                  </div>
                  <div>
                    <el-radio-group
                      v-model="additionalParams.dateType"
                      @change="getOrderIndustry"
                      size="small"
                    >
                      <el-radio-button label="1">今年</el-radio-button>
                      <el-radio-button label="2">本月</el-radio-button>
                      <el-radio-button label="3">去年</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </template>
              <div>
                <el-table
                  :data="orderIndustryData.orderIndustryList"
                  style="width: 100%"
                >
                  <el-table-column
                    prop="businessType"
                    label="业务板块"
                    width="230"
                  >
                    <template #default="scope">
                      <dict-drop
                        :options="order_business_type"
                        :value="scope.row.businessType"
                      ></dict-drop>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="orderNum"
                    label="订单数量"
                    width="120"
                  />
                  <el-table-column prop="price" label="订单金额" width="120" />
                  <el-table-column prop="memberNum">
                    <template #default="scope">
                      <div class="demo-progress">
                        <el-progress
                          :text-inside="false"
                          :show-text="false"
                          :stroke-width="10"
                          :percentage="
                            orderIndustryData.totalPrice == 0
                              ? 0
                              : Number(
                                  (
                                    (Number(scope.row.price) /
                                      Number(orderIndustryData.totalPrice)) *
                                    100
                                  ).toFixed(2)
                                )
                          "
                        />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    width="120"
                    fixed="right"
                  >
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:notice:edit']"
                      >
                        <template #icon>
                          <span
                            class="i-fluent-chevron-circle-right-12-filled"
                          ></span>
                        </template>
                        查看详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="p-b-6">
          <el-col :span="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header flex justify-between items-center">
                  <div class="font-bold text-xl">
                    订单统计(按单位)<span>{{ paramsName }}</span>
                  </div>
                  <div>
                    <el-button
                      :icon="'Search'"
                      circle
                      link
                      @click="open = true"
                    />
                  </div>
                </div>
              </template>
              <div class="h-400px">
                <EcharsBar :barObj="barObj" />
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="p-b-6" v-if="false">
          <el-col :span="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header flex justify-between items-center">
                  <div class="font-bold text-xl">销售漏斗</div>
                  <!-- <div>
                    <el-button :icon="'Setting'" circle link />
                  </div> -->
                </div>
              </template>
              <div></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="p-b-6" v-if="false">
          <el-col :span="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header flex justify-between items-center">
                  <div class="font-bold text-xl">采购金额统计</div>
                  <!-- <div>
                    <el-button :icon="'Setting'" circle link />
                  </div> -->
                </div>
              </template>
              <div></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- <el-col :span="6"><div class="p-6 rounded-lg box-shadow">22</div></el-col> -->
    </el-row>
    <!-- 统计条件 -->
    <el-dialog :title="'统计条件'" v-model="open" width="800px" append-to-body>
      <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="单位" prop="deptIdArr">
          <el-tree-select
            class="w-full"
            v-model="form.deptIdArr"
            placeholder="请输入单位"
            default-expand-all
            multiple
            :disabled="userStore.userInfo.orgId != 484"
            :data="companyOption"
            :props="{
              value: 'id',
              label: 'label',
              children: 'children'
            }"
          />
        </el-form-item>
        <el-form-item label="业务板块" prop="businessType">
          <el-tree-select
            class="w-full"
            clearable
            v-model="form.businessType"
            placeholder="请选择业务分类"
            :data="businessTypeOption"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">取消</el-button>
          <el-button type="primary" @click="dialogOrderData">统计</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="orderStatistics">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import EcharsBar from './modules/bar'
import {
  businessTypeOption,
  companyOption //所属公司
} from '@/hooks/dict/order'
import {
  statisticsCondition,
  statisticsOrderIndustry,
  statisticsOrder
} from '@/api/orderStatistics/index'
import useUserStore from '@/store/modules/user'
import { flattenTree } from '@/utils/commo'

const userStore = useUserStore()
const components = shallowRef({
  EcharsBar
})
const Color = ['green', 'orange', 'red']
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const {
  order_business_type, //板块
  customer_star //星级客户
} = proxy.useDict('order_business_type', 'customer_star')
const data = reactive({
  additionalParams: { dateType: '1' },
  topData: { customerStars: [] },
  orderIndustryData: {
    orderIndustryList: []
  },
  open: false,
  form: {
    deptIdArr: [userStore.userInfo.orgId] //所属公司默认
  },
  rules: {
    deptId: [
      {
        required: true,
        message: '请选择单位',
        trigger: 'change'
      }
    ],
    businessType: [
      {
        required: false,
        message: '请选择业务类型',
        trigger: 'change'
      }
    ]
  },
  orderData: {},
  barObj: {
    option: {
      title: {
        show: false
      }
    },
    dataOption: [
      {
        name: '去年'
      },
      {
        name: '今年'
      }
    ]
  }
})
let {
  additionalParams,
  topData,
  orderIndustryData,
  open,
  form,
  rules,
  orderData,
  barObj
} = toRefs(data)
const paramsName = computed(() => {
  let companyArr = []
  let businessType = ''
  let companyOptionData = flattenTree(companyOption.value, 'children')
  let text1 = ''
  let text2 = ''
  companyOptionData.forEach(e => {
    form.value.deptIdArr.forEach(item => {
      if (e.id == item) {
        companyArr.push(e.label)
      }
    })
  })
  order_business_type.value.forEach(e => {
    if (e.value == form.value.businessType) {
      businessType = e.label
    }
  })
  text1 = companyArr.length > 0 ? `单位:${companyArr.toString()}` : ''
  text2 = businessType ? `;业务板块:${businessType}` : ''
  return text1 + text2
})
watchEffect(() => {}, { flush: 'post' })
const getIcon = name => {
  //   institution
  // customer
  // digital
  return new URL(`../../../assets/images/icon/${name}.png`, import.meta.url)
    .href
}
function init() {
  getCondition()
  getOrderIndustry()
  getOrderData()
}
function getCondition() {
  statisticsCondition().then(ref => {
    topData.value = ref.data
  })
}
function getOrderIndustry() {
  statisticsOrderIndustry(additionalParams.value).then(ref => {
    orderIndustryData.value = ref.data
  })
}
function getOrderData() {
  barObj.value.xLabel = []
  barObj.value.dataOption[0].data = []
  barObj.value.dataOption[1].data = []
  return new Promise((resolve, reject) => {
    statisticsOrder(form.value)
      .then(ref => {
        orderData.value = ref.data
        orderData.value.forEach(item => {
          barObj.value.xLabel.push(item.month)
          barObj.value.dataOption[0].data.push(item.lastYear)
          barObj.value.dataOption[1].data.push(item.thisYear)
        })
        resolve(ref)
        // console.log('orderData==>', barObj.value)
      })
      .catch(e => {
        reject(e)
      })
  })
}
function dialogOrderData() {
  proxy.$refs.roleRef.validate(async (valid, msg) => {
    if (valid) {
      getOrderData()
      open.value = false
    }
  })
}
init()
</script>
<style lang="scss" scoped>
.test {
  @apply text-green-500 text-orange-500 text-red-500;
}
.box-shadow {
  box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
}
.box-card {
  :deep(.el-card__header) {
    @apply bg-slate-100;
  }

  :deep(
      .el-table .el-table__header-wrapper th,
      .el-table .el-table__fixed-header-wrapper th
    ) {
    background-color: #ffffff !important;
  }
}

.demo-progress .el-progress--line {
  width: 100%;
}
.order-card {
  :deep(.el-card__body) {
    padding-top: 2px !important;
  }
}
</style>
